<template>
	<view class="animated fadeIn faster" style="min-height: 100vh;background-color: #f4f5f7;">
		<view class="status-bar-height bg-fff"></view>
		<view class="colorhold px-3 pt-3 text-center" style="margin-top: 110rpx;">{{tit}}</view>
		<view class="py-3" style="padding-left: 15rpx;padding-right: 15rpx;">
			<view class="d-flex d-flex-wrap mb-3">
				<view class="login-box" v-for="(item,index) in userList" :key="item._id" @click="setUser(index)">
					<view class="position-relative" :class="{'login-on':userIndex==index}">
						<image :src="item.avatar_file?.url" class="login-img"></image>
						<view class="position-absolute d-flex d-flex-center d-flex-middle login-txt-bg">
							<text class="colorfff font26">{{item.nickname}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="position-fixed left-0 right-0 bottom-0 d-flex d-flex-center d-flex-middle rounded60 login-btn" style="bottom: 30rpx;" @click="userLogin" :class="{'login-btn-on':userIndex !=-1}">
			<text class="colorfff font32">立即登录</text>
		</view>
		
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				userIndex:-1,
				tit:'正在为您加载角色',
				userList:[]
			}
		},
		onReady() {
			this.init()
		},
		methods: {
			init(){
				let that = this
				let requestUrl = 'https://www.168802.xyz/loginjson/login.json'
				 // #ifdef H5
				 requestUrl = '/static/json/login.json?v=12345645441'
				 // #endif
				uni.request({
					url:requestUrl,
					success:(res)=>{
						that.userList = res.data
						that.tit='请选择一个角色'
					},
					fail(e) {
						that.tit='暂未找到角色'
					}
				})
			},
			setUser(index){
				this.userIndex = index
			},
			userLogin(){
				let that = this
				if(that.userIndex == -1){
					uni.showToast({
						title:'请选择一个登录用户',
						icon:'none'
					})
					return
				}
				uniIm.login(that.userList[that.userIndex]).then((res) => {
					if(res && res.errorCode==0){
						uni.reLaunch({
							url:'/pages/index/index'
						})
						// uni.switchTab({
						// 	url:'/pages/index/index'
						// })
					}
				}).catch((error)=>{
					uni.showToast({
						title:'登录失败，请稍后重新登录',
						icon:"none"
					})
					console.log('error',error)
				})
			},
		}
	}
</script>

<style scoped>
.login-box{
	width: 210rpx;
	height: 210rpx;
	padding-left: 15rpx;
	padding-right: 15rpx;
	margin-bottom: 30rpx;
}
.login-img{
	width: 210rpx;
	height: 210rpx;
	border-radius: 22rpx;
	border-style: solid;
	box-sizing: border-box;
	border-width: 1px;
	border-color: rgba(0,0,0,.3);
}
.login-on .login-img{
	border-color: #ff5722;
}
.login-txt-bg{
	height: 50rpx;
	left: 1px;
	right: 1px;
	bottom: 1px;
	background-color: rgba(0,0,0,.3);
	border-bottom-right-radius: 22rpx;
	border-bottom-left-radius: 22rpx;
}
.login-on .login-txt-bg{
	background-color: #ff5722;
}
.login-btn{
	height: 90rpx;
	background-color: rgba(225,87,34,.4);
}
.login-btn-on{
	background-color: rgba(225,87,34,1);
}
</style>
